<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/wqqpage.css">
    <link rel="stylesheet" href="css/swiper-3.4.2.min.css">
    <script src="lib/jquery-3.2.1.min.js"></script>
    <script src="lib/swiper-3.4.2.min.js"></script>
    <script src="lib/baiduTemplate.js"></script>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=3d01e54b67a1997550aa916fdda67ea7"></script>
</head>
<body>
    <div class="all">
        <div class="header">
            <div class="ju">
                <div class="ha">
                    <p><span class="s1">北京</span>&nbsp;&nbsp;
                        <a href="#" id="qie">[切换城市]</a> <span> | </span>
                        <a href="#">同城帮首页</a></p>
                </div>
                <div class="header1">
                    <ul>
                        <li><a href="javascript:" id="lu">登录</a></li>|
                        <li><a href="javascript:" id="ce">注册</a></li> |
                        <li><a href="javascript:">我的订单</a></li> |
                        <li><a href="javascript:">在线客服(9:00-21:00)</a></li> |
                        <li><a href="javascript:">客户服务</a></li> |
                        <li><a href="javascript:">论坛</a></li> |
                        <li class="lis"><a href="#" style="color: red">投诉建议</a></li>
                    </ul>
                </div>

            </div>
            <div class="chengshi">
                <div class="list">
                    <span>城市列表</span>
                    <input type="button" value="关闭 x" class="guan">
                </div>
                <div class="remen">
                    <div class="bei">
                        <p>热门</p>
                        <ul></ul>
                    </div>
                    <div class="pinyin">
                        <p id="p1">拼音</p>
                        <div class="abcd"></div>
                        <div class="an">
                            <p></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <section>
            <div class="nps_d">
                <div class="logo">
                    <img src="images/7.png">
                </div>
                <div class="nps_a">
                    <img src="images/11.png">
                    <ul>
                        <li><a href="#">二手优品</a></li>
                        <li><a href="#">手机回收</a></li>
                        <li><a href="#">手机维修</a></li>
                        <li><a href="#">电脑维修</a></li>
                        <li><a href="#">以旧换新</a></li>
                        <li><a href="#">手机租用</a></li>
                    </ul>
                </div>
            </div>
            <div class="lun">
                <div class="tou">
                    <ul>
                        <li>
                            <span>修手机/pad</span>
                            <div class="xiu"></div>
                        </li>
                        <li>
                            <span>修电脑</span>
                            <div class="diannao">
                                <div class="rewen">热门问题：
                                </div>
                                <div class="qiwen">其他问题：</div>
                            </div>
                        </li>
                        <li>
                            <span>卖手机/电脑</span>
                            <div class="mai"></div>
                        </li>
                        <li>
                            <span>买二手手机</span>
                            <div class="mai1"></div>
                        </li>
                    </ul>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="images/1.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
                        <div class="swiper-slide"><img src="images/3.png" alt=""></div>
                        <div class="swiper-slide"><img src="images/2.jpg" alt=""></div>
                    </div>
                    <!-- 如果需要分页器 -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </section>
        <div class="sui">
            <img src="images/s.jpg">
            <img src="images/a.jpg">
            <img src="images/d.jpg">
            <img src="images/f.png">
        </div>
        <div class="fixa">
            <h2>热门手机回收</h2>
            <a href="#">查看更多 <img src="images/12.png"></a>
        </div>
        <div class="Tus">
            <img src="images/24.jpg">
            <ul class="Tus1"></ul>
        </div>
        <div class="fixa">
            <h2>热门手机回收</h2>
            <a href="#">查看更多 <img src="images/12.png"></a>
        </div>
        <div class="Tus">
            <img src="images/24.jpg">
            <ul class="Tus2"></ul>
        </div>
        <div class="fixa">
            <h2>到店维修</h2>
        </div>
        <div class="bia">
            <div class="weixiu">
                <div class="W_left">
                    <div class="sas">
                        <div class="shi">
                            <span>北京</span>
                            <span class="caret"></span>
                        </div>
                        <div class="shi">
                            <span>选择区县</span>
                            <span class="caret"></span>
                        </div>
                        <div class="shangjia">
                            <input type="text" placeholder="输入您的位置查找附近的商家" class="in1" id="inputs">
                            <input type="button" value="搜索" class="in2">
                        </div>
                    </div>
                    <div class="moren">
                        <div class="mes">
                            <ul>
                                <li>默认排序</li>
                                <li>按成交量</li>
                                <li>按人气</li>
                                <li><input type="checkbox">先行赔付</li>
                            </ul>
                            <div class="ditu">
                                <span><img src="images/13.png" alt="">地图模式</span>
                            </div>
                        </div>
                    </div>
                    <div class="dfg"></div>
                    </div>
                    <div class="fenye"></div>
                </div>
                <!--商家好评榜-->
                <div class="bang">
                    <div class="paihang">
                        <span>商家好评榜</span>
                    </div>
                    <div class="paiming">
                        <div class="one">①</div>
                        <div class="dtu"><img src="images/dian.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one">②</div>
                        <div class="dtu"><img src="images/ss.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one">③</div>
                        <div class="dtu"><img src="images/sheng.gif"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one houm">④</div>
                        <div class="dtu"><img src="images/dian.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one houm">⑤</div>
                        <div class="dtu"><img src="images/dian.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one houm">⑥</div>
                        <div class="dtu"><img src="images/dian.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                    <div class="paiming">
                        <div class="one houm">⑦</div>
                        <div class="dtu"><img src="images/dian.jpg"></div>
                        <div class="gs"><p>联金诚维修中心</p><p>121706条评论</p></div>
                    </div>
                </div>
            </div>
        </div>
        <!--底部-->
        <div class="wei">
            <div class="F4">
                <ul>
                    <li>
                        <img src="images/18.jpg">
                        <div>
                            <p>购物指南</p>
                            <p>购物流程</p>
                            <p>帮助文档</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/18.jpg">
                        <div>
                            <p>购物指南</p>
                            <p>购物流程</p>
                            <p>帮助文档</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/18.jpg">
                        <div>
                            <p>购物指南</p>
                            <p>购物流程</p>
                            <p>帮助文档</p>
                        </div>
                    </li>
                    <li>
                        <img src="images/18.jpg">
                        <div>
                            <p>购物指南</p>
                            <p>购物流程</p>
                            <p>帮助文档</p>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="dis">
                <p>客服电话：4000-399-360 / 010-53767360 <a href="#">投诉建议</a><a href="#">网站地图</a></p>
                <p>Copyright © 2005-2017  360.CN  All Rights Reserved  360安全中心</p>
                <p><a href="#">京ICP备08010314号-19</a> 京公网安备110000000006号</p>
            </div>
        </div>
    <div class="daa">
        <div class="deng">
            <div class="divs">
                <span>欢迎登陆同城帮</span>
                <a href="#" class="stop">X</a>
            </div>
            <div class="zhang">
                <p><span>账&nbsp;&nbsp;&nbsp;号</span><input type="text" id="usname" placeholder="手机号/用户名/邮箱"></p>
                <p><span>密&nbsp;&nbsp;&nbsp;码</span><input type="password" id="pass" placeholder="请输入您的密码"></p>
                <p class="paa"><input type="checkbox" id="check">下次记住密码</p>
                <p><input type="button" id="bn" value="立即登录"></p>
            </div>
        </div>
        <div class="zhuce">
            <div class="divs1">
                <span>欢迎注册360同城帮</span>
                <a href="#" class="stop">X</a>
            </div>
            <div class="zhuce1">
                <div class="zhu">
                    <ul>
                        <li><a class="shouji">手机注册</a></li>
                        <li><a class="youxiang">邮箱注册</a></li>
                    </ul>
                </div>
                <div class="hao">
                    <p><span>手机号</span><input type="text" id="num"><br><span id="span1"></span></p>
                    <p><span>密码</span><input type="password" id="mima"><br><span id="span2"></span></p>
                    <p><span>验证码</span><input type="text" id="yan"><br><span id="span3"></span></p>
                    <p><span>手机校验码</span><input type="text" id="xiao"><br id="span4"><span></span></p>
                    <input type="button" value="注册" id="zhuce">
                </div>
                <div class="email">
                    <p><span>邮箱号</span><input type="text" id="you"><br><span id="span5"></span></p>
                    <p><span>密码</span><input type="password" id="mima2"><br><span id="span6"></span></p>
                    <p><span>验证码</span><input type="text" id="yan2"><br><span id="span7"></span></p>
                    <input type="button" value="注册" id="zhuce2">
                </div>
            </div>
        </div>
        <div class="gaode">
            <div class="moshi">
                <p>地图模式<span class="stop">X</span></p>
            </div>
            <div id="container" tabindex="0"></div>
            <div id="mapPage"></div>
        </div>
    </div>
</body>
<script type="text/html" id="dianpu">
    <%for(var i=0;i<shop_data.length;i++){%>
        <div class="dianpu">
            <div class="ms">
                <img src="<%=shop_data[i].shop_ico%>" >
            </div>
            <div class="hdua">
                <p><span class="sps"><%=shop_data[i].shop_name%></span> <span>店铺等级：</span><img src="images/17.png"><img src="images/17.png"></p>
                <p>主营：<%=shop_data[i].main%></p>
                <p>地址：<%=shop_data[i].addr%></p>
            </div>
            <div class="pei">
                <p><img src="images/15.png">先行赔付</p>
                <p><img src="images/16.png">同城帮认证</p>
                <p>人气：<%=shop_data[i].shop_visit%></p>
            </div>
            <div class="ru">
                <span id="jingru">进入店铺</span>
            </div>
        </div>
    <%}%>
</script>
<script src="js/wqqpage.js"></script>
<script src="js/tab.js"></script>
<script src="js/page.js"></script>
<script>
    // 店铺分页

    var page = new PagePlug($(".fenye")[0],{
        totalPages:20,
        liNums:10,
        firstPage:"首页",
        pre:"上一页",
        activeColor:"orange",
        callBack:function(page){
            // ajax请求对应页数的数据
//            console.log(page[0]);
            shopPage(page);
        }
    })
    shopPage(1);
    function shopPage(index){
        $.get("http://localhost:3000/dianpu?pageNum="+index,function(data){
            console.log(data)
//            $(".dfg").html(baidu.template("dianpu",data))
            $(".dfg")[0].innerHTML = baidu.template("dianpu",data)
//            $(".dfg").html(baidu.template("dianpu",data))
        })
    }
    var mySwiper = new Swiper ('.swiper-container', {
        direction: 'horizontal',
        loop: true,

        // 如果需要分页器
        pagination: '.swiper-pagination',

        // 如果需要前进后退按钮
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        // paginationClickable:'true',
        paginationHide:"true",

        paginationClickable: true,

        initialSlide: 1,
        autoplay: true,
        speed: 3000,
    })

//        window.Hale.Page($(".fenye")[0], {
//        totalPages: 20,//分页总数
//        liNums: 9,//分页的数字按钮数(建议取奇数)
//        callBack: function (page) {
//            $.get("http://localhost:3000/data/shop"+page+".json",function (data) {
//                console.log(data)
//                $(".dfg").html(baidu.template("dianpu",data))
//            })
//            },
//            hasPrv: false,
//            hasFirstPage: false,
//            hasLastPage: false,
//            hasNext: true,
//            next: "下一页>>"
//    })

</script>
<script>
//    创建地图
    var map = new AMap.Map('container',{
        resizeEnable: true,
        zoom: 10,
        center: [116.480983, 40.0958]
    });
//    添加控件
    AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],
            function(){
                map.addControl(new AMap.ToolBar());

                map.addControl(new AMap.Scale());

                map.addControl(new AMap.OverView({isOpen:true}));
            });
//
    var mk = new AMap.Marker({
        icon : 'http://vdata.amap.com/icons/b18/1/2.png',
        position :[116.656552,39.886672],
        map : map
    });

function createInfowindow(shop) {
    infoWindow = new AMap.InfoWindow({
        isCustom: true,  //使用自定义窗体
        content: '<div style="width: 200px;border: 1px solid #000;background-color: #fff"><p style="width: 200px;height: 40px;font-size: 16px;background:#ccc;border-bottom: 1px solid #666;margin-bottom: 10px">'+shop.shop_name+'</p><p style="font-size: 12px;padding-left:10px;">主营：'+shop.main+'</p><p style="font-size: 12px;padding-left:10px;">地址：'+shop.addr+'</p><p style="font-size: 12px;padding-left:10px;"><a href='+shop.shop_addr+'>进入店铺</a></p></div>',  //使用默认信息窗体框样式，显示信息内容
        offset: new AMap.Pixel(16, -50),//-113, -140
        closeWhenClickMap:true
    });
    infoWindow.open(map, [shop.map_longitude,shop.map_latitude]);
}
//    计算经纬度的中心点来确定地图的中心点
function getCenter(shopArr) {
    var A=0;
    var B=0;
    for(var i=0;i<shopArr.length;i++){
        A+=Number(shopArr[i].map_longitude);
        B+=Number(shopArr[i].map_latitude);
    }
    var obj=[A/shopArr.length,B/shopArr.length]
    return obj;
}
window.Hale.Page($("#mapPage")[0], {
    totalPages: 20,//分页总数
    liNums: 9,//分页的数字按钮数(建议取奇数)
    callBack: function (page) {
        if(page==5)return;
        mapShop(page);
    },
    hasPrv: false,
    hasFirstPage: false,
    hasLastPage: false,
    hasNext: true,
    next: "下一页>>"
});
/////////////////////////////////////////////////////获取店铺信息
mapShop(1)
function mapShop(num) {
    if(map==undefined)return;
    map.clearMap();
    $.get("http://localhost:3000/dianpu?pageNum="+num,function (data) {
        //console.log("============");
        //console.log(data);
        for(var i=0;i<data.shop_data.length;i++){
            ////创建 marker
            var marker = new AMap.Marker({
                icon : 'images/datouzhen.png',//
                position : [data.shop_data[i].map_longitude,data.shop_data[i].map_latitude],
                map : map
            });

            (function (idx) {
                marker.on("click",function () {
                    createInfowindow(data.shop_data[idx])
                })
            })(i)

        }
        //设置地图中心
        var center=getCenter(data.shop_data);
        map.setCenter(center);
        // console.log(getCenter(data.shop_data))
    });
}

//输入提示
    AMap.plugin('AMap.Autocomplete',function(){//回调函数
        //实例化Autocomplete
        var autoOptions = {
            city: "北京", //城市，默认全国
            input:"inputs"//使用联想输入的input的id
        };
        autocomplete= new AMap.Autocomplete(autoOptions);
        //TODO: 使用autocomplete对象调用相关功能
    })
</script>
</html> 